/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="progress-bar">
			<view class="progress-item">
				<view class="line " :class="[stepInfo>=1?'em-back':'']"></view>
				<view class="circle " :class="[stepInfo>=1?'em-back':'']">1</view>
				<view class="title " :class="[stepInfo>1?'em-front':'']">入驻商家信息</view>
			</view>
			<view class="progress-item">
				<view class="line " :class="[stepInfo>=2?'em-back':'']"></view>
				<view class="circle " :class="[stepInfo>=2?'em-back':'']">2</view>
				<view class="title " :class="[stepInfo>=2?'em-front':'']">入驻商家信息</view>
			</view>
			<view class="progress-item">
				<view class="line ":class="[stepInfo>=3?'em-back':'']"></view>
				<view class="circle " :class="[stepInfo>=3?'em-back':'']">3</view>
				<view class="title " :class="[stepInfo>=3?'em-front':'']">入驻商家信息</view>
			</view>
			<view class="progress-item">
				<view class="line " :class="[stepInfo>=4?'em-back':'']"></view>
				<view class="circle " :class="[stepInfo>=4?'em-back':'']">4</view>
				<view class="title " :class="[stepInfo>=4?'em-front':'']">审核/完成</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			stepInfo:{
				type:Number,
				default:0,
			}
		},
		data() {
			return {
				
			};
		},
		onLoad(){
			console.log(this.stepInfo)
		}
		
	}
</script>

<style lang="scss">
.progress-bar {
		width: 710rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.progress-item {
		color: white;
		width: 25%;
		height: 120rpx;
		display: inline-block;
		position: relative;
		background-color: #fff;
		z-index: 0;
	}

	.progress-item .line {
		background-color: #B8B8B8;
		width: 100%;
		height: 4rpx;
		position: absolute;
		top: 40rpx;
		z-index: -1;
	}

	.progress-item .circle {
		background-color: #B8B8B8;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		font-size: 22rpx;
		line-height: 36rpx;
		text-align: center;
		margin: 22rpx auto 0;
	}

	.progress-item .title {
		color: #A0A0A0;
		font-size: 24rpx;
		text-align: center;
		margin-top: 8rpx;
	}

	.progress-item .em-back {
		background-color: #ff3b3b;
	}

	.progress-item .em-front {
		color: #ff3b3b;
	}

	.progress-bar .progress-item:first-child .line {
		width: 50%;
		right: 0rpx;
	}

	.progress-bar .progress-item:last-child .line {
		width: 50%;
	}
</style>
